<template>
	<view class="center">
		<view class="center_top">
			<view class="mask">个人中心
				<image class="header_img" :src="setting" mode=""></image>
			</view>
			<view class="base">
				<view class="profily_header">
				</view>
				<text>{{nickname}}</text>
			</view>
		</view>
		<view class="center_box_bg">
			<view class="profily">
				<view class="order_status">
					<view class="status" @click="services(item)" v-for="item in status">
						<image class="icon" :src="item.url" mode="aspectFill"></image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="baiban">

			</view>
<!-- 			<view class="ai_chong aichong">
				<view class="white_s">
					<view class="aictext">
						我的爱宠
					</view>
					<lovepets :dataval="pets"></lovepets>
				</view>
			</view> -->
			<view class="ai_chong margin_text_">
				<view class="white_s">
					<dogtips :doglist="menus" @navFN='navct'></dogtips>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import setting from "@/static/dog/icon/my.png";
	import one from './static/fumou-center-template/one.png'
	import dog_one from '@/static/dog/1.jpg'
	import dog_2 from '@/static/dog/2.jpg'
	import dog_3 from '@/static/dog/3.jpg'
	import dog_4 from '@/static/dog/4.jpg'
	import dog_5 from '@/static/dog/5.jpg'
	import dog_6 from '@/static/dog/6.jpg'
	import dog_7 from '@/static/dog/7.jpg'
	import lovepets from '../../components/pets/lovepets' //爱宠
	import dogtips from '../../components/pets/DogTips' //养犬小贴士
	import dogarticle from '../../components/pets/dogarticle' //养犬小贴士

	import bangding from '@/static/dog/icon/bangding.png'
	import jilu from '@/static/dog/icon/jilu.png'
	import dingwei from '@/static/dog/icon/dingwei.png'
	import jinduchaxun from '@/static/dog/icon/jinduchaxun.png'
	import icon1 from './static/fumou-center-template/5.png'
	import icon2 from './static/fumou-center-template/6.png'
	import icon3 from './static/fumou-center-template/7.png'
	import icon4 from './static/fumou-center-template/8.png'
	import icon5 from './static/fumou-center-template/9.png'
	import icon6 from './static/fumou-center-template/10.png'

	export default {
		props: {},
		components: {
			lovepets,
			dogtips,
			dogarticle
		},
		data() {
			return {
				nickname:'绵州犬管欢迎您的参与',
				text:{},
				setting,
				status: [{
						key: 1,
						name: '宠物',
						url: jinduchaxun,
						address:'../petscore/petscorelist',
						type:'0',
					},
					{
						key: 2,
						name: '主页',
						url: jilu,
						address:'../media/personinfo',
						type:'1',
					},
					{
						key: 3,
						name: '相册',
						url: dingwei,
						address:'../media/picture',
						type:'1',
					},
					{
						key: 4,
						name: '视频',
						url: bangding,
						address:'../media/video',
						type:'1',
					}
				],
				pets: [{
						'img': dog_7,
						'name': '潇洒哥',
						'Gender': 'GG',
						'text': '那就阿森纳那时的Iasi叫大家说的i氨基酸的就爱上邓丽君爱上了的就撒手大家拉克斯基大家说的 ',
						"people": '24',
						'time': '2016-8',
					},
					{
						'img': dog_6,
						'name': '胖头妹',
						'Gender': 'MM',
						'text': '那就阿森纳那时的Iasi叫大家说的i氨基酸的就爱上邓丽君爱上了的就撒手大家拉克斯基大家说的',
						"people": '30',
						'time': '2016-8',
					}, {
						'img': dog_5,
						'name': '蹦屁哥',
						'Gender': 'MM',
						'text': '那就阿森纳那时的Iasi叫大家说的i氨基酸的就爱上邓丽君爱上了的就撒手大家拉克斯基大家说的',
						"people": '25',
						'time': '2016-8',
					}, {
						'img': dog_6,
						'name': '蹦屁哥',
						'Gender': 'MM',
						'text': '那就阿森纳那时的Iasi叫大家说的i氨基酸的就爱上邓丽君爱上了的就撒手大家拉克斯基大家说的',
						"people": '14',
						'time': '2016-8',
					},
				],
				menus: [{
						name: '我的钱包',
						icon: icon1,
						key: 1,
					},
					{
						name: '我的收藏',
						icon: icon2,
						key: 2,
					},
					{
						name: '浏览历史',
						icon: icon3,
						key: 3,
					},
					{
						name: '我的活动',
						icon: icon4,
						key: 4,
					},
					{
						name: '设置',
						icon: icon5,
						key: 5,
					},
					{
						name: '意见反馈',
						icon: icon6,
						key: 6,
					}

				]

			}
		},
		methods: {
			navct(item){
				uni.showToast({
				    title: '正在开发中！',
					  icon:'none',
				    duration: 2000
				});
			},
			services(item) {
				switch(item.type){
					case '0':
					uni.navigateTo({
						"url": item.address,
						"animationType": 'pop-in',
						"animationDuration": 200
					});
					break;
					case '1':
					uni.showToast({
					    title: '正在开发中！',
						  icon:'none',
					    duration: 2000
					});
					break;
				}

				}
			
		},
		watch: {},

		onReachBottom() { //页面上拉触底事件的处理函数

		},
		onPullDownRefresh() { //监听用户下拉动作，一般用于下拉刷新
			//需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
			//uni.startPullDownRefresh(); 开启
			// uni.stopPullDownRefresh(); 关闭
		},
		onUnload() { //监听页面卸载

		},
		onHide() { //监听页面隐藏

		},
		onLoad() { // 替代 created 监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例

		},
		onReady() { //替代 mounted 监听页面初次渲染完成
		  if(uni.getStorageSync('USERINFO'.wx)){
			 this.setting = uni.getStorageSync('USERINFO').wx.avatar;
			 this.nickname = uni.getStorageSync('USERINFO').wx.nickname; 
		  }
		},

		onShow() { //监听页面显示  每次调用页面

		}
	}
</script>
<style lang="scss" scoped>
	.profily {
		border-radius: 8px;
	}

	.profily_header {
		border-radius: 50%;
	}

	.header_img {
		// border-radius: ;
	}

	.margin_text_ {
		margin-top: 15px;
	}

	.center {
		height: 100%;

		&_top {
			position: fixed;
			top: 0px;
			z-index: 888;
			width: 100%;
			height: 300upx;
			background-size: cover;
			background: rgb(125, 185, 232);
			/* Old browsers */
			background: -moz-linear-gradient(left, #3da8fc 0%, #2989d8 59%, #218ae3 100%, #469cff 100%);
			/* FF3.6-15 */
			background: -webkit-linear-gradient(left, #3da8fc 0%, #2989d8 59%, #218ae3 100%, #469cff 100%);
			/* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to right, #3da8fc 0%, #2989d8 59%, #218ae3 100%, #469cff 100%);
			/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db9e8', endColorstr='#1e5799', GradientType=1);

			.mask {
				text-align: center;
				color: white;
				font-size: 16px;
				line-height: 30px;

				image {
					position: absolute;
					height: 50upx;
					width: 50upx;
					right: 18px;
					top: 7px;
				}
			}
		}

		&_box_bg {
			background: #F9F9F9;

			.profily {
				position: fixed;
				width: 90%;
				z-index: 999;
				margin: 0 auto;
				top: 200upx;
				left: 5%;
				background: #FEFEFE;
				padding: 35upx;
				box-sizing: border-box;
				box-shadow: 0px 2px 5px #EDEDED;
			}
		}
	}

	.base {
		display: flex;
		align-items: center;

		padding-bottom: 35upx;
		position: relative;
		width: 88%;
		margin: auto;

		.profily_header {
			height: 120upx;
			width: 120upx;
			background-image: url('./static/fumou-center-template/z.jpg');
			background-size: 100%;
		}

		text {
			margin-left: 20px;
			font-size: 30upx;
			color: white;
			font-size: 15px
		}


	}

	.order_status {
		display: flex;
		justify-content: space-between;
		// margin-top: 35upx;

		.status {
			width: 140upx;
			font-size: 24upx;
			text-align: center;
			letter-spacing: .5px;
			display: flex;
			flex-direction: column;

			.icon {
				width: 50upx;
				height: 50upx;
				margin: 0 auto;
				margin-bottom: 5px;

			}
		}
	}

	.baiban {
		background: #FEFEFE;
		height: 400upx;
	}

	.aichong {
		height: 135px;
		background: white;
	}

	.yangquan {}

	.ai_chong {
		width: 100%;

		// background: white;

		.white_s {
			width: 90%;
			height: 100%;
			margin: auto;

		}

		.aictext {

			font-size: 16px;
			font-weight: bold;
			color: #464c5b;
			width: 100%;
			height: 37px;

		}

		.my_Pets {
			width: 100%;
			height: 150px;
		}
	}
</style>
